<template>
    <!-- ec-canvas/wallet/orderdetails/index.wxml -->
    <view>
        <!-- <view>
    <view class="order_bg_box">
      <image class="order_bg" src="{{hairimgUrl + 'order-bg.png'}}"></image>
    </view>
    <view class="mask_box">
      <view class="order_mask">
        <image class="order_mask" src="{{hairimgUrl + 'order-mask.png'}}"></image>
      </view>
      <view class="order_title">您距离5000元注册奖金还差：</view>
      <view class="order_gap">订单业绩(20万元)</view>
      <van-progress custom-class="order_progress" show-pivot="{{false}}" color="#FFAF40" percentage="10" />
      <view class="order_msg">注：您需要满足总订单业绩达到20w即可获得！</view>
    </view>
  </view> -->
        <view>
            <view class="flexbox-sb centers box1">
                <view class="centers" @tap="showTime">
                    <picker class="box1text1 mr-10" mode="date" fields="day" :value="currentDate" :start="minDate"
                        :end="maxDate" @change="onInputTime">
                        <view class="picker">{{ nowtime }}</view>
                    </picker>
                    <view class="jiao"></view>
                </view>
                <view class="centers" @tap="showType">
                    <picker @change="onChangeType" :value="index" :range="showtypeList">
                        <view class="picker">{{ showtypeList[index] }}</view>
                    </picker>
                    <view class="jiao"></view>
                </view>
            </view>
            <view class="order_box" @tap.stop.prevent="onOrderStatistics" :data-order-id="item.orderId"
                :data-order-name="item.orderName" v-for="(item, index) in detailList" :key="index">
                <view class="flexbox">
                    <view class="mr-30">
                        <image class="headimg" :src="item.userPhotoPath"></image>
                    </view>
                    <view>
                        <view class="oreder_text1">用户名：{{ item.nickName }}</view>
                        <view class="oreder_text2">美发师：{{ item.stylistName }}</view>
                        <view class="oreder_text2">项目名称：{{ item.orderName }}</view>
                    </view>
                </view>

                <view class="flexbox mt-66">
                    <view class="money_box">
                        <view class="money_text1">付款金额</view>
                        <view class="money_text2 mt-12">¥ {{ item.payAmount }}</view>
                    </view>
                    <view class="money_box">
                        <view class="money_text1">收入</view>
                        <view class="money_text3 mt-12">¥ {{ item.amount }}</view>
                    </view>
                </view>

                <view class="time mt-40">完成时间：{{ item.createtime }}</view>

                <view class="status_title1" v-if="item.isclear == 0">已完成</view>

                <view class="status_title2" v-if="item.isclear == 1">已结算</view>
            </view>
            <view class="w-100" v-if="detailList.length == 0">
                <van-empty description="暂无数据" />
            </view>
        </view>
    </view>
</template>

<script>
import vanProgress from '@/wxcomponents/vant/dist/progress/index';
import vanEmpty from '@/wxcomponents/vant/dist/empty/index';
// ec-canvas/wallet/orderdetails/index.js
const app = getApp(); // 引入app

import _request from '../../../utils/request.js';
import { getTime } from '../../../utils/util.js'; // 引入utils;

const moment = require('../../../utils/moment.min');

export default {
    components: {
        vanProgress,
        vanEmpty
    },
    data() {
        return {
            hairimgUrl: app.globalData.hairimgUrl,
            //全局美发师img路径
            currentDate: moment().format('YYYY-MM-DD'),
            minDate: moment().subtract(3, 'year').format('YYYY-MM-DD'),
            maxDate: moment().format('YYYY-MM-DD'),

            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`;
                }

                if (type === 'month') {
                    return `${value}月`;
                }

                return value;
            },

            showtypeList: ['全部', '已结算', '已完成'],
            index: 0,
            nowtime: '',
            nowtime1: '',
            typetit: '全部',
            typetit1: '全部',
            type: 1,
            showtype: false,
            showtime: false,
            detailList: [],
            page: 1,
            gettime: '',
            detailList: [] // 列表数据
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.setData(
            {
                gettime: getTime(new Date().getTime(), 8)
            },
            () => {
                this.getfindOrderDetail();
            }
        );
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () { },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        let time = getTime(new Date().getTime(), 6);
        this.setData({
            nowtime: time
        });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () { },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () { },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        uni.hideNavigationBarLoading(); //完成停止加载
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.setData(
            {
                page: this.page + 1
            },
            () => {
                this.getfindOrderDetail();
            }
        );
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () { },
    methods: {
        // 订单统计
        onOrderStatistics(event) {
            let name;
            let meal = '';
            if (event.currentTarget.dataset.orderName.indexOf('#') > -1) {
                name = event.currentTarget.dataset.orderName.split('#')[0];
                meal = event.currentTarget.dataset.orderName.split('#')[1];
            } else {
                name = event.currentTarget.dataset.orderName;
                meal = '';
            }

            var orderId = event.currentTarget.dataset.orderId;
            const statusRemark = '已完成';
            const orderBtn = '';
            const stylistNexus = '';
            const orderName = name;
            const mealName = meal;
            uni.navigateTo({
                url:
                    '/pages/orderdetail/orderdetail?orderId=' +
                    orderId +
                    '&orderStatus=' +
                    statusRemark +
                    '&orderBtn=' +
                    orderBtn +
                    '&stylistNexus=' +
                    stylistNexus +
                    '&orderName=' +
                    orderName +
                    '&mealName=' +
                    mealName
            });
        },

        // 显示时间弹窗
        showTime() {
            this.setData({
                showtime: true
            });
        },

        // 关闭窗口
        onCloseTime() {
            this.setData({
                showtime: false
            });
        },

        // 获取时间
        onInputTime(event) {
            let dt = event.detail.value;
            this.setData(
                {
                    detailList: [],
                    currentDate: dt,
                    nowtime: moment(dt).format('YYYY年MM月DD日'),
                    gettime: moment(dt).format('YYYYMMDD'),
                    page: 1
                },
                () => {
                    this.getfindOrderDetail();
                }
            );
        },

        // 显示类型弹窗
        showType() {
            this.setData({
                showtype: true
            });
        },

        // 关闭窗口
        onCloseType() {
            this.setData({
                showtype: false
            });
        },

        // 获取选择类型
        onChangeType(event) {
            const index = event.detail.value;
            this.setData({
                index: index,
                page: 1
            });

            if (index == 0) {
                this.setData(
                    {
                        type: '1'
                    },
                    () => {
                        this.getfindOrderDetail();
                    }
                );
            } else if (index == 1) {
                this.setData(
                    {
                        type: '3'
                    },
                    () => {
                        this.getfindOrderDetail();
                    }
                );
            } else {
                this.setData(
                    {
                        type: index
                    },
                    () => {
                        this.getfindOrderDetail();
                    }
                );
            }
        },

        // 列表数据
        getfindOrderDetail() {
            _request
                .get('/storeOrderDetail/findOrderDetail', {
                    userId: uni.getStorageSync('userId'),
                    type: this.type,
                    date: this.gettime
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.setData({
                            detailList: res.data.data.map((item) => {
                                if (item.orderName && item.orderName.indexOf('#') > -1) {
                                    item.orderName = item.orderName.split('#')[0];
                                }

                                return item;
                            })
                        });
                    }
                });
        }
    }
};
</script>
<style>
/* ec-canvas/wallet/orderdetails/index.wxss */
.order_bg {
    height: 200rpx;
    width: 100%;
}

.order_mask {
    height: 360rpx;
    position: absolute;
    z-index: 1;
    width: 710rpx;
    top: 0;
    right: 0;
    left: 0;
}

.mask_box {
    position: relative;
    padding: 64rpx 20rpx 24rpx 30rpx;
    position: relative;
    top: -100rpx;
    height: 360rpx;
    box-sizing: border-box;
    margin: 0 20rpx;
}

.order_title {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    z-index: 2;
    position: absolute;
}

.order_gap {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
    z-index: 2;
    position: absolute;
    top: 148rpx;
}

.order_progress {
    position: absolute;
    top: 150rpx;
    z-index: 2;
}

.order_msg {
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 28rpx;
    position: absolute;
    bottom: 24rpx;
    right: 20rpx;
    z-index: 2;
}

.order_box {
    width: 710rpx;
    /* height: 430rpx; */
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    padding: 40rpx 0 20rpx 20rpx;
    margin: 10rpx 20rpx 0 20rpx;
    box-sizing: border-box;
    position: relative;
}

.headimg {
    width: 128rpx;
    height: 128rpx;
    border-radius: 50%;
}

.flexbox {
    display: flex;
    flex-wrap: wrap;
}

.money_box {
    width: 50%;
    text-align: center;
}

.money_text1 {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
}

.money_text2 {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 40rpx;
}

.money_text3 {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff1717;
    line-height: 40rpx;
}

.oreder_text1 {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    max-width: 430rpx;
}

.oreder_text2 {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 40rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    max-width: 500rpx;
}

.time {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
}

.status_title1 {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
    line-height: 34rpx;
    position: absolute;
    top: 28rpx;
    right: 28rpx;
}

.status_title2 {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 34rpx;
    position: absolute;
    top: 28rpx;
    right: 28rpx;
}

.box1 {
    width: 100%;
    height: 100rpx;
    border-bottom: 1px solid #ededed;
    padding: 0 40rpx;
    box-sizing: border-box;
}

.box1text1 {
    height: 50rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 50rpx;
}

.jiao {
    width: 0px;
    height: 0px;
    border-top: 12rpx solid #333333;
    border-left: 12rpx solid transparent;
    border-right: 12rpx solid transparent;
}

.re_100 {
    position: relative;
    top: -100rpx;
}
</style>
